<template>
    <div class="admin-sider-group">
        <div class="header">
            <div class="title">{{title}}</div>
            <div class="ctrl">
                <div class="ctrl-btn" v-for="item,index in ctrl" :key="index" >
                    <bi-icon :data="item.icon" @click="item.click"></bi-icon>
                </div>
                <div class="ctrl-btn">
                    <bi-icon :data="isFold?'fa-chevron-down':'fa-chevron-up'" @click="handleFold"></bi-icon>
                </div>
            </div>
        </div>
        <div class="body" v-show="!isFold">
            <slot></slot>
        </div>
    </div>
</template>

<script>
/*

ctrl [object,object]

object {
    icon:'',
    click:
}

*/

export default {
    data(){
        return {
            isFold:false
        }
    },
    props:{
        title:{
            type:String,
            default:''
        },
        fold:{
            type:Boolean,
            default:true
        },
        ctrl:{
            type:Array,
            default:[]
        }
    },
    methods:{
         
        handleFold(){
            this.isFold =!this.isFold;
        }
    }
}
</script>

<style>
.admin-sider-group .header{
    padding: 10px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.admin-sider-group .header .title{
    color:var(--bs-dark-bg-subtle);
    font-size: 12px;
}
.admin-sider-group .header .ctrl{
    font-size: 12px;
    display: flex;
    align-items: center;
    visibility: hidden;
}

.admin-sider-group .header:hover .ctrl{
    visibility: visible;
}

.admin-sider-group .header .ctrl .ctrl-btn{
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin-right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: var(--bs-dark-bg-subtle);
    opacity: 0.5;
    transition: all.2s ease-in-out;
}
.admin-sider-group .header .ctrl .ctrl-btn:hover{
    opacity: 1;
}
</style>